import { useEffect } from 'react';
import useGameStore from '../context/gameStore';
import useKeyboardInput from '../hooks/useKeyboardInput';

const GameUI = () => {
  const gameStatus = useGameStore(state => state.gameStatus);
  const score = useGameStore(state => state.score);
  const combo = useGameStore(state => state.combo);
  const maxCombo = useGameStore(state => state.maxCombo);
  const currentSong = useGameStore(state => state.currentSong);
  const startGame = useGameStore(state => state.startGame);
  const pauseGame = useGameStore(state => state.pauseGame);
  const resumeGame = useGameStore(state => state.resumeGame);
  const stopGame = useGameStore(state => state.stopGame);
  
  // 使用键盘输入钩子
  useKeyboardInput();
  
  // ESC键暂停/恢复游戏
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') {
        if (gameStatus === 'playing') {
          pauseGame();
        } else if (gameStatus === 'paused') {
          resumeGame();
        }
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [gameStatus, pauseGame, resumeGame]);
  
  return (
    <div className={`game-ui ${gameStatus}`}>
      {/* 头部信息 */}
      <div className="game-header">
        <div className="song-info">
          {currentSong && (
            <>
              <h3>{currentSong.name}</h3>
              <p>{currentSong.artist}</p>
            </>
          )}
        </div>
        
        <div className="score-display">
          <div className="score">
            <h2>{score.toLocaleString()}</h2>
            <span>分数</span>
          </div>
          
          <div className="combo">
            <h3>{combo}x</h3>
            <span>连击</span>
          </div>
          
          <div className="max-combo">
            <h4>最高: {maxCombo}x</h4>
          </div>
        </div>
      </div>
      
      {/* 游戏状态和控制按钮 */}
      <div className="game-controls">
        {gameStatus === 'ready' && (
          <button className="start-button" onClick={startGame}>
            开始游戏
          </button>
        )}
        
        {gameStatus === 'playing' && (
          <button className="pause-button" onClick={pauseGame}>
            暂停
          </button>
        )}
        
        {gameStatus === 'paused' && (
          <>
            <div className="paused-overlay">
              <h2>游戏已暂停</h2>
            </div>
            <button className="resume-button" onClick={resumeGame}>
              继续游戏
            </button>
            <button className="stop-button" onClick={stopGame}>
              停止游戏
            </button>
          </>
        )}
        
        {gameStatus === 'finished' && (
          <div className="game-over">
            <h2>游戏结束</h2>
            <p>最终得分: {score.toLocaleString()}</p>
            <p>最高连击: {maxCombo}x</p>
            <button className="restart-button" onClick={stopGame}>
              返回主菜单
            </button>
          </div>
        )}
      </div>
      
      {/* 游戏帮助提示 */}
      {gameStatus === 'playing' && (
        <div className="key-hints">
          <div className="key">Q</div>
          <div className="key">W</div>
          <div className="key">E</div>
          <div className="key">R</div>
          <div className="key-space">空格</div>
        </div>
      )}
    </div>
  );
};

export default GameUI; 